<template>
  <div class="head">
    <div class="login">
      <router-link to="/">
        <img src="../assets/1654871744407.png" alt="" />
      </router-link>
    </div>
    <ul class="souye">
      <li>
        <router-link to="/">首页</router-link>
      </li>
      <li>
        <a href="#" style="position: relative"
          >校招 <i class="xiaotubiao"></i>
        </a>
      </li>
      <li>
        <a href="#">留学生</a>
      </li>
      <li>
        <a href="#" style="position: relative"
          >实习僧TV <i class="xiaotubiao_1"></i>
        </a>
      </li>
      <li>
        <a href="#">实习僧教育</a>
      </li>
    </ul>
    <!-- 没有登录之前显示的 -->
    <div class="geren" v-if="!loginuname">
      <div class="touxiang">
        <span class="yonghu"><router-link to="/login">登录</router-link></span>
        <span class="yonghu"
          ><router-link to="/register">注册</router-link></span
        >
      </div>
    </div>
    <!-- 只有登录之后才会显示账号 -->
    <div class="geren" v-else>
      <div class="touxiang">
        <div class="tt" style="">
          <ul>
            <li>
              <router-link :to="`/resume/` + this.jid">个人中心</router-link>
            </li>
            <li><a href="#">我的投递</a></li>
            <li><a href="#">账号设置</a></li>
            <li><a href="javascript:;" @click="tuichu">退出登录</a></li>
          </ul>
        </div>
        <span class="yonghu">{{ loginuname }}</span>
      </div>
      <span class="xiaoxi">
        <a href="#">消息</a>
      </span>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      jid: null,
    };
  },
  computed: {
    ...mapState(["loginuname"]),
  },
  mounted() {
    this.UNAME();
  },
  methods: {
    ...mapMutations(["login"]),
    tuichu() {
      this.login(null);
      this.$router.push("/login");
    },
    // 通过vuex里面存储的用户名获取用户的手机号头像
    UNAME() {
      if (this.loginuname) {
        let url = `v1/users/juser?uname=${this.loginuname}`;
        this.axios.get(url).then((res) => {
          // console.log("用户名返回值", this.loginuname, res);
          this.jid = res.data.data[0].jid;
        });
      }
    },
  },
};
</script>

<style lang="scss">
.login a img {
  width: 100%;
  height: 100%;
}
</style>